import {useEffect} from "react";
import {NavHeader} from "../../components/NavHeader";

import styles from './index.module.css'
import {getMapAPI} from "../../apis/list";


const Map = () => {

    // 解决脚手架中全局变量访问的问题
    const BMapGL = window.BMapGL;

    // 覆盖物样式
    const labelStyle = {
        cursor: 'pointer',
        border: '0px solid rgb(255, 0, 0)',
        padding: '0px',
        whiteSpace: 'nowrap',
        fontSize: '12px',
        color: 'rgb(255, 255, 255)',
        textAlign: 'center'
    }

    // 区和镇覆盖物
    const createCircle = (point, name, count, id, zoom, map) => {
        const opts = {
            position: point, // 指定文本标注所在的地理位置
            offset: new BMapGL.Size(-35, -35) // 设置文本偏移量
        };
        // 创建文本标注对象
        const label = new BMapGL.Label('', opts);

        // 给label对象添加唯一标识
        label.id = id

        // 设置房源覆盖物
        label.setContent(`
                          <div class="${styles.bubble}">
                            <p class="${styles.name}">${name}</p>
                            <p>${count}套</p>
                          </div>
                    `)

        // 自定义文本标注样式
        label.setStyle(labelStyle);

        // 添加单击事件
        label.addEventListener('click', () => {

            renderOverlays(id)

            // 以覆盖物为中心放大地图
            map.centerAndZoom(point, zoom);

            setTimeout(() => {
                map.clearOverlays()
            }, 0)
        })

        map.addOverlay(label);
    }

    // 小区覆盖物
    const createRect = (areaPoint, areaName, count, value, map) => {

    }

    // 创建覆盖物
    const createOverlays = (data, zoom, type, map) => {
        // 解构数据
        const {
            coord: {longitude, latitude},
            label: areaName,
            count,
            value
        } = data;

        // 创建坐标对象
        const areaPoint = new BMapGL.Point(longitude, latitude);

        if (type === 'circle') {
            // 区和镇
            createCircle(areaPoint, areaName, count, value, zoom, map)
        } else {
            // 小区
            createRect(areaPoint, areaName, count, value, map)
        }


    }

    // 渲染覆盖物
    const renderOverlays = async (id, map) => {
        const res = await getMapAPI(id);
        const data = res.data.body;
        // 获取缩放级别、覆盖物类别
        const {nextZoom, type} = getTypeAndZoom(map);
        data.forEach(item => {
            // 创建障碍物
            createOverlays(item, nextZoom, type, map);
        })
    }

    // 获取缩放级别、覆盖物类别
    const getTypeAndZoom = (map) => {
        const zoom = map.getZoom()
        let nextZoom, type
        // 区
        if (zoom >= 10 && zoom < 12) {
            type = 'circle'
            nextZoom = 13
        } else if (zoom >= 12 && zoom < 14) {
            // 镇
            type = 'circle'
            nextZoom = 15
        } else if (zoom >= 14 && zoom < 16) {
            // 小区
            type = 'rect'
        }

        return {
            type,
            nextZoom
        };
    }
    // 渲染完成之后执行
    useEffect(() => {
        // 获取当前地址
        const {label, value} = JSON.parse(localStorage.getItem('hkzf_city'));

        // 创建地图实例
        const map = new BMapGL.Map("container");
        const scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        const zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件

        //创建地址解析器实例
        const myGeo = new BMapGL.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint(label, async (point) => {
            if (point) {
                // 初始化地图
                map.centerAndZoom(point, 11);
                // 添加比例尺控件
                map.addControl(scaleCtrl);
                // 添加缩放控件
                map.addControl(zoomCtrl);

                // 获取房源数据
                renderOverlays(value, map);

            } else {
                alert('您选择的地址没有解析到结果！');
            }
        }, label)

    }, [])

    return (
        <div className={styles.map}>
            {/*  顶部导航栏  */}
            <NavHeader>地图找房</NavHeader>
            {/*  地图容器  */}
            <div id="container" className={styles.container}/>
        </div>
    )
}


export default Map